<template>
	<div class="add-rule">
		<el-card class="rule-card">
			<template #header>
				<div class="card-btn">
					<el-button @click="$router.back()">
						<el-icon><arrow-left /></el-icon>
						返回
					</el-button>
				</div>
			</template>
			<div class="rule-container">
				<div class="container-resource">
					<p class="resource-title">资源</p>
					<div class="resource-content">
						<p class="content-title">服务资源类型</p>
						<p class="content-text">API</p>
						<p class="content-title">服务资源名称</p>
						<p class="content-text">个人网银转账</p>
						<div class="content-son">
							<p class="son-title">流量分类标识</p>
							<p class="content-title">一级分类标识</p>
							<p class="content-text">HTTP</p>
							<p class="content-title">二级分类标识</p>
							<p class="content-text">HTTPSource</p>
							<p class="content-title">三级分类标识</p>
							<p class="content-text">HTTP.HEAD.tag=123</p>
						</div>
					</div>
				</div>
				<div class="container-rule">
					<p class="rule-title">规则</p>
					<div class="rule-content">
						<p class="content-title">规则类型</p>
						<p class="content-text">限流</p>
						<p class="content-text">Gien滑动窗口</p>
						<div class="content-son">
							<p class="son-title">规则参数</p>
							<p class="content-title">窗口数</p>
							<p class="content-text">2</p>
							<p class="content-title">统计时长</p>
							<p class="content-text">1 秒</p>
						</div>
					</div>
				</div>
				<div class="container-time">
					<p class="time-title">时间</p>
					<div class="time-content">
						<p class="content-title">生效时间</p>
						<p class="content-text">2022-09-23</p>
						<p class="content-title">失效时间</p>
						<p class="content-text">2022-09-27</p>
					</div>
				</div>
			</div>
		</el-card>
	</div>
</template>
<script lang="ts" setup>
	import { onBeforeMount, onMounted, reactive, ref } from 'vue'
	import { getItem } from '@/utils/storage'

	const formSize = ref<ComponentSize>('default')
	const ruleFormRef = ref<FormInstance>()
	const ruleForm = reactive<RuleForm>({
		name: '',
		region: '',
		switch: '',
		set: '',
	})

	const rules = reactive<FormRules<RuleForm>>({
		name: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
		region: [
			{
				required: true,
				message: '内容不能为空',
				trigger: 'change',
			},
		],
	})

	onMounted(() => {})

	defineExpose({})
</script>

<style lang="scss" scoped>
	.add-rule {
		margin-bottom: 50px;
		.rule-card {
			.card-btn {
			}
		}
		.rule-container {
			width: 100%;
			padding: 0px 20px;
			.container-resource {
				width: 100%;
				border-bottom: 1px dashed #ccc;
				.resource-title {
					font-size: 16px;
					font-weight: 600;
				}
				.resource-content {
					display: flex;
					flex-wrap: wrap;
					.content-title {
						color: #999;
					}
					.content-text {
						margin: 0px 30px 0px 10px;
						color: #333;
					}
					.content-son {
						padding: 0px 20px 0px 20px;
						width: 100%;
						display: flex;
						.son-title {
							margin-right: 40px;
						}
					}
				}
			}
			.container-rule {
				width: 100%;
				margin-top: 20px;
				border-bottom: 1px dashed #ccc;
				.rule-title {
					font-size: 16px;
					font-weight: 600;
				}
				.rule-content {
					display: flex;
					flex-wrap: wrap;
					.content-title {
						color: #999;
					}
					.content-text {
						margin: 0px 30px 0px 10px;
						color: #333;
					}
					.content-son {
						padding: 0px 20px 0px 20px;
						width: 100%;
						display: flex;
						.son-title {
							margin-right: 40px;
						}
					}
				}
			}
			.container-time {
				width: 100%;
				margin-top: 20px;
				// border-bottom: 1px dashed #ccc;
				.time-title {
					font-weight: 600;
					font-size: 16px;
				}
				.time-content {
					display: flex;
					flex-wrap: wrap;
					.content-title {
						color: #999;
					}
					.content-text {
						margin: 0px 30px 0px 10px;
						color: #333;
					}
				}
			}
		}
	}
</style>
